<template>
  <view class="companyInfoContainer">
    <view class="navigationBar" :style="{ background: propStyles.bgColor }">
      <!-- 状态栏 -->
      <view :style="{ height: statusBarHeight + 'px', width: '100%' }" class="navbar-top">
        <image v-if="propStyles.bgSrc" :src="propStyles.bgSrc" class="bar1Image"></image>
      </view>
      <!-- <view class="navbar-content" :style="{ height: navBarHeight + 'px', width: windowWidth + 'px',color:propStyles.txtColor,background:'url('+propStyles.bgSrc+')' }"> -->
      <view class="navbar-content" :style="{ height: navBarHeight + 'px', width: '100%' }">

        <view v-if="propStyles.iconSrc == 'yellow'" @tap="goBack" class="iconBox">
          <image class="icon" src="../../static/ucenter/backY.png"></image>
        </view>
        <view v-if="propStyles.iconSrc == 'black'" @tap="goBack" class="iconBox">
          <image class="iconB" src="../../static/ucenter/backB.png"></image>

        </view>
        <view v-if="propStyles.iconSrc == 'add'" @tap="jumpTo('/page_cookHome/cookPublish')" class="iconBox">
          <image class="iconA" src="https://visionmpapi.jiuerjindi.com/upload/mp/myInfo/addIcon.png"></image>
          <view class="publish">发布</view>
        </view>
        <image v-if="propStyles.bgSrc1" :src="propStyles.bgSrc1" class="bar1Image"></image>
        <text v-if="title" :style="{ color: propStyles.txtColor }">{{ title }}</text>
      </view>
    </view>
    <view class="zhanwei"
      :style="{ height: statusBarHeight + navBarHeight + 'px' ,background:propStyles.zhanweiColor }">
    </view>
  </view>
</template>
<script>
  const util = require("@/utils/util.js");
  const api = require("@/utils/api.js");
  const app = getApp();
  export default {
    name: 'customNavigationBar',
    data() {
      return {
        statusBarHeight: 20,
        navBarHeight: 45,
        windowWidth: 375,


      };
    },
    props: {
      title: null,
      iconSrc: null,
      tapEvent: null,
      propStyles: {
        iconSrc: '',
        bgColor: '',
        txtColor: '',
        bgSrc: '',
        bgSrc1: '',
        zhanweiColor: ''
      }
    },
    methods: {
      jumpTo(url,isTab){
        console.log('111',isTab);
        if (isTab ) {
          uni.switchTab({
          url: `${url}`
        })
        } else{
          console.log('222',url);
          uni.navigateTo({
            url:  `${url}`,
          });
        } 
      },
      goBack() {

        uni.navigateBack()
      },
      goHome() {
        uni.switchTab({
          url: '/pages/index/index',
        })
      },




    },

    created() {
      //获取手机系统信息
      const info = uni.getSystemInfoSync();
      //设置状态栏高度
      this.statusBarHeight = info.statusBarHeight;
      this.windowWidth = info.windowWidth;
      // h5 app mp-alipay没有胶囊按钮
      // #ifndef H5 || APP-PLUS || MP-ALIPAY
      // 获取胶囊的位置
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      // (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
      this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
        .statusBarHeight)
      this.windowWidth = menuButtonInfo.left
      // #endif
    },
    onLoad: function () {
      const that = this;


    },

  };

</script>

<style lang="scss" scoped>
  .companyInfoContainer {
    box-sizing: border-box;
  }

  .navigationBar {
    width: 100%;
    background: #FFF;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999 !important;

    .navbar-top {
      position: relative;
    }

    .bar1Image {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0rpx;
      left: 0rpx;
    }

    .navbar-content {
      position: relative;
      padding: 0 33rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 45px;

      text {
        width: 50%;
        text-align: center;
      }


    }

  }

  .iconBox {
    height: 100%;
    display: flex;
    /* flex-direction: column; */
    justify-content: center;
    position: absolute;
    left: 30rpx;
    align-items: center;

    .publish {
      font-weight: 500;
      font-size: 24rpx;
      color: #333333;
    }

  }

  .icon {
    // background: url('../static/ucenter/backIcon.png');
    background-size: 100%;
    width: 40rpx;
    height: 40rpx;
    // margin-right: 10rpx;
    z-index: 999;
  }

  .iconB {
    width: 17rpx;
    height: 28rpx;
    z-index: 999;
  }

  .iconA {
    width: 48rpx;
    height: 48rpx;
    z-index: 999;
    margin-right: 8rpx;
  }

  .home {
    background-size: 100%;
    width: 36rpx;
    height: 36rpx;
    // margin-right: 10rpx;
    z-index: 999;
  }

  .vertify {
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    left: 32rpx;
  }

  text {
    z-index: 999;
    font-size: 34rpx;
    font-weight: 500;
    text-overflow: ellipsis;
    // width: 150px;
    overflow: hidden;
    white-space: nowrap;
  }


  .zhanwei {
    width: 100%;
  }
</style>